<style>
    .color-picker .hue {
        position: relative;
        height: 25px;
        background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 66%, #ff00ff 83%, #ff0000 100%);
    }

    .handle {
        position: relative;
        box-sizing: border-box;
        width: 10px;
        height: 140%;
        top: -20%;
        border: 1px solid black;
        border-radius: 1em;
        pointer-events: none;
    }

    .handle2 {
        position: absolute;
        box-sizing: border-box;
        width: 100%;
        height: 100%;

        border: 2px solid white;
        border-radius: 1em;
        pointer-events: none;
    }

    .color-picker .sl {
        position: relative;
        width: 100%;
        aspect-ratio: 1/1;
        background: hsl(0, 100%, 50%);
    }

    .color-picker .sl .l {
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
        pointer-events: none;
    }

    .color-picker .sl .s {
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
        pointer-events: none;
    }

    .color-picker .sl .cursor {
        position: relative;
        width: 10px;
        aspect-ratio: 1/1;
        border: 1px solid black;
        border-radius: 1em;
        pointer-events: none;
    }

    .color-picker input {
        box-sizing: border-box;
        width: 100%;
    }
</style>

<dom>
    <div class="color-picker col">
        <div class="hue" $="hue">
            <div class="handle" $="hueHandle">
                <div class="handle2"></div>
            </div>
        </div>
        <div class="sl" $="sl">
            <div class="s"></div>
            <div class="l"></div>
            <div class="cursor" $="slHandle">
                <div class="handle2"></div>
            </div>
        </div>
        <div>
            <input $="ebHex" placeholder="Hex" @change="onEditHex" />
        </div>
    </div>
</dom>